<dom-module id="grid-filtering-demos">
  <template>
    <style include="vaadin-component-demo-shared-styles">
      :host {
        display: block;
      }
    </style>

    <h3>Filtering</h3>
    <p>
      Use <code>&lt;vaadin-grid-filter-column&gt;</code> for simple filtering. The column's <code>path</code> property
      is used as a pointer to the item sub-property that the items get filtered by.
    </p>
    <p>
      For custom setup, a <code>&lt;vaadin-grid-filter&gt;</code> element can be added to the column header
      manually with a <code>headerRenderer</code>.
    </p>
    <p>
      <b>NOTE: You must explicitly import the <code>vaadin-grid-filter-column</code> or <code>vaadin-grid-filter</code> in order to use them.</b>
    </p>

    <vaadin-demo-snippet id="grid-filtering-demos-filtering" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-grid aria-label="Filtering Example">
          <vaadin-grid-column path="name.first" header="First name"></vaadin-grid-column>
          <vaadin-grid-filter-column path="name.last" header="Last name"></vaadin-grid-filter-column>
          <vaadin-grid-column path="email" id="email"></vaadin-grid-column>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-filtering-demos-filtering', function(document) {
            const grid = document.querySelector('vaadin-grid');
            grid.items = Vaadin.GridDemo.users;

            // Email column filter is assigned a custom input field
            const emailColumn = document.querySelector('#email');
            emailColumn.headerRenderer = function(root) {
              root.innerHTML =
                '<vaadin-grid-filter path="email">' +
                '  <vaadin-text-field slot="filter" focus-target label="Email" style="max-width: 100%" theme="small"></vaadin-text-field>' +
                '</vaadin-grid-filter>';
              root.querySelector('vaadin-text-field').addEventListener('value-changed', function(e) {
                root.querySelector('vaadin-grid-filter').value = e.detail.value;
              });
            };
          });
        </script>
      </template>
    </vaadin-demo-snippet>

    <h3>Filtering with Data Provider</h3>
    <p>
      While filtering works with array data providers out-of-the-box, custom data
      providers need to hand pre-filtered data to the vaadin-grid.
    </p>
    <p>
      Whenever the value of a vaadin-grid-filter changes, for example, when
      a user types something, the dataProvider is asked for fresh data with
      the <code>filters</code> included as one of the request parameters.
    </p>

    <vaadin-demo-snippet id="grid-filtering-demos-filtering-with-data-provider" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-grid aria-label="Filtering with Data Provider Example">
          <vaadin-grid-filter-column path="firstName"></vaadin-grid-filter-column>
          <vaadin-grid-filter-column path="lastName"></vaadin-grid-filter-column>
          <vaadin-grid-column path="email"></vaadin-grid-column>
        </vaadin-grid>
        <script>
          window.addDemoReadyListener('#grid-filtering-demos-filtering-with-data-provider', function(document) {
            const grid = document.querySelector('vaadin-grid');

            grid.size = 200;
            grid.dataProvider = function(params, callback) {
              const xhr = new XMLHttpRequest();
              xhr.onload = function() {
                const response = JSON.parse(xhr.responseText);

                // Number of items changes after filtering. We need
                // to update the grid size based on server response.
                grid.size = response.size;

                callback(response.result);
              };

              const index = params.page * params.pageSize;
              let url = 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize;

              // `params.filters` format: [{path: 'lastName', direction: 'asc'}, ...];
              params.filters.forEach(function(filter) {
                url += '&filters[' + filter.path + ']=' + encodeURIComponent(filter.value);
              });

              xhr.open('GET', url, true);
              xhr.send();
            };
          });
        </script>
      </template>
    </vaadin-demo-snippet>

  </template>
  <script>
    class GridFilteringDemos extends DemoReadyEventEmitter(GridDemo(Polymer.Element)) {
      static get is() {
        return 'grid-filtering-demos';
      }
    }
    customElements.define(GridFilteringDemos.is, GridFilteringDemos);
  </script>
</dom-module>
